<template>
  <div class="body">
    <section class="work-banner">
      <div class="center-block">
        <div class="index-title pull-left">
          <h2>办事大厅</h2>
        </div>
      </div>
    </section>

    <section class="workTop">
      <div class="center-block">
        <div id="QuaT1" class="mainTop_tab QuaT clearfix">
          <h3 class="circular-title"></h3>
          <div id="QuaTle1" class="QuaTle Q_left">
            <span
              @click="activeTab(index)"
              :class="{active:index==ids}"
              v-for="(item, index) in typeList"
              :key="index"
            >{{item}}</span>
          </div>
        </div>
        <div id="QuaBoy1" class="mainTop_content MainTable QuaBoy">
          <section :class="ids==0?'active':''">
            <div class="m_c_text">
              <h3 class="m_c_title">请选择项目类型</h3>

              <ul class="m_c_list clearfix">
                <li
                  :class="{active:index==idq}"
                  @click="projeckList(index)"
                  v-for="(item,index) in projectList"
                  :key="index"
                >{{item}}</li>
              </ul>
              <h3 class="m_c_title">请选择申办环节</h3>
              <div class="tab_box">
                <ul class="m_c_flow active clearfix">
                  <li class="Blue">
                    <a href="javascript:;">
                      <i class="dtFont dtFont-lixiangyongdiguihuaxuke"></i>
                    </a>
                    <p>立项用地规划许可</p>
                  </li>
                  <li class="Gray">
                    <a href="javascript:;">
                      <i class="dtFont dtFont-gongchengjianshexuke"></i>
                    </a>
                    <p>工程建设许可</p>
                  </li>
                  <li class="Gray">
                    <a href="javascript:;">
                      <i class="dtFont dtFont-shigongxuke"></i>
                    </a>
                    <p>施工许可</p>
                  </li>
                  <li class="Gray">
                    <a href="javascript:;">
                      <i class="dtFont dtFont-jungongyanshou"></i>
                    </a>
                    <p>竣工验收</p>
                  </li>
                </ul>
                <ul class="m_c_flow clearfix">
                  <li class="Gray">
                    <a href="javascript:;">
                      <i class="dtFont dtFont-lixiangyongdiguihuaxuke"></i>
                    </a>
                    <p>立项用地规划许可</p>
                  </li>
                  <li class="Blue">
                    <a href="javascript:;">
                      <i class="dtFont dtFont-gongchengjianshexuke"></i>
                    </a>
                    <p>工程建设许可</p>
                  </li>
                  <li class="Gray">
                    <a href="javascript:;">
                      <i class="dtFont dtFont-shigongxuke"></i>
                    </a>
                    <p>施工许可</p>
                  </li>
                  <li class="Gray">
                    <a href="javascript:;">
                      <i class="dtFont dtFont-jungongyanshou"></i>
                    </a>
                    <p>竣工验收</p>
                  </li>
                </ul>
                <ul class="m_c_flow clearfix">
                  <li class="Gray">
                    <a href="javascript:;">
                      <i class="dtFont dtFont-lixiangyongdiguihuaxuke"></i>
                    </a>
                    <p>立项用地规划许可</p>
                  </li>
                  <li class="Gray">
                    <a href="javascript:;">
                      <i class="dtFont dtFont-gongchengjianshexuke"></i>
                    </a>
                    <p>工程建设许可</p>
                  </li>
                  <li class="Blue">
                    <a href="javascript:;">
                      <i class="dtFont dtFont-shigongxuke"></i>
                    </a>
                    <p>施工许可</p>
                  </li>
                  <li class="Gray">
                    <a href="javascript:;">
                      <i class="dtFont dtFont-jungongyanshou"></i>
                    </a>
                    <p>竣工验收</p>
                  </li>
                </ul>
                <ul class="m_c_flow clearfix">
                  <li class="Gray">
                    <a href="javascript:;">
                      <i class="dtFont dtFont-lixiangyongdiguihuaxuke"></i>
                    </a>
                    <p>立项用地规划许可</p>
                  </li>
                  <li class="Gray">
                    <a href="javascript:;">
                      <i class="dtFont dtFont-gongchengjianshexuke"></i>
                    </a>
                    <p>工程建设许可</p>
                  </li>
                  <li class="Gray">
                    <a href="javascript:;">
                      <i class="dtFont dtFont-shigongxuke"></i>
                    </a>
                    <p>施工许可</p>
                  </li>
                  <li class="Blue">
                    <a href="javascript:;">
                      <i class="dtFont dtFont-jungongyanshou"></i>
                    </a>
                    <p>竣工验收</p>
                  </li>
                </ul>
              </div>

              <ul class="m_c_flow clearfix">
                <li class="Gray">
                  <a href="javascript:;">
                    <i class="dtFont dtFont-lixiangyongdiguihuaxuke"></i>
                  </a>
                  <p>立项用地规划许可</p>
                </li>
                <li class="Gray">
                  <a href="javascript:;">
                    <i class="dtFont dtFont-gongchengjianshexuke"></i>
                  </a>
                  <p>工程建设许可</p>
                </li>
                <li class="Blue">
                  <a href="javascript:;">
                    <i class="dtFont dtFont-shigongxuke"></i>
                  </a>
                  <p>施工许可</p>
                </li>
                <li class="Gray">
                  <a href="javascript:;">
                    <i class="dtFont dtFont-jungongyanshou"></i>
                  </a>
                  <p>竣工验收</p>
                </li>
              </ul>
              <h3 class="m_c_title">
                <select id="city">
                  <option>南昌市</option>
                  <option>景德镇</option>
                  <option>鹰潭市</option>
                </select>
                <select class="area">
                  <option>西湖区</option>
                  <option>西湖区2</option>
                  <option>西湖区3</option>
                  <option>西湖区4</option>
                  <option>西湖区5</option>
                </select>
                <select class="area" style="display: none;">
                  <option>西湖区6</option>
                  <option>西湖区7</option>
                  <option>西湖区8</option>
                  <option>西湖区9</option>
                  <option>西湖区10</option>
                </select>
                <select class="area" style="display: none;">
                  <option>西湖区11</option>
                  <option>西湖区12</option>
                  <option>西湖区13</option>
                  <option>西湖区14</option>
                  <option>西湖区15</option>
                </select>
              </h3>
            </div>
          </section>
          <section :class="ids==1?'active':''">
            <div class="m_c_text">
              <ul class="data-searchBoxSelcect">
                <li>
                  <div>城市选择</div>
                  <!-- 二级城市区域 -->
                  <section class="spans">
                    <span
                      :class="{active:index==idc}"
                      @click="citysTab(index)"
                      v-for="(item,index) in citys"
                      :key="index"
                    >{{item.cityName}}</span>
                  </section>
                </li>

                <li>
                  <div>区域选中</div>
                  <!-- 一级市区区域 -->
                  <section class="spans">
                    <span
                      @click="areasTab(index)"
                      :class="{active:index==ida}"
                      v-for="(item,index) in areas"
                      :key="index"
                    >{{item}}</span>
                  </section>
                </li>
                <li>
                  <div>部门选择</div>
                  <!-- 部门选择 -->
                  <section class="spans">
                    <span
                      @click="departTab(index)"
                      :class="{active:index==idd}"
                      v-for="(item,index) in departments"
                      :key="index"
                    >{{item.departName}}</span>
                  </section>
                </li>
              </ul>
            </div>
          </section>
          <table class="m_c_table table" width="100%" cellpadding="0" cellspacing="0">
            <thead>
              <tr>
                <th width="700px">事项名称</th>
                <th width="200px">部门名称</th>
                <th>所属地区</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item,index) in radioList" :key="index">
                <td>
                  <div class="content">
                    <label class="mt-checkbox">
                      <input type="checkbox" @click="showClic(index,$event)" value />
                      <span></span>
                      <em>{{item.listName}}</em>
                    </label>
                    <div v-show="isShow===index">
                      <p>
                        <label class="mt-radio">
                          <input checked type="radio" :name="item.id" />
                          <span></span>
                          <em>{{item.listName}}</em>
                        </label>
                      </p>
                      <p>
                        <label class="mt-radio">
                          <input type="radio" :name="item.id" />
                          <span></span>
                          <em>{{item.listName}}</em>
                        </label>
                      </p>
                    </div>
                  </div>
                </td>
                <td>{{item.idItem}}</td>
                <td>{{item.citys}}</td>
                <td>
                  <router-link :to="`/govService/guide?id=${item.id}`">
                    <i class="dtFont dtFont-banshizhinan"></i>办事指南
                  </router-link>
                </td>
              </tr>
            </tbody>
          </table>
          <!-- 分页 -->
          <div style="padding: 20px 0">
            <div class="fenYe clearfix">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="100"
              ></el-pagination>
            </div>
          </div>
        </div>
      </div>
      <div class="fixed-matter">
        <div class="center-block clearfix">
          <p>
            共选中
            <span>{{amount}}</span>项办事
          </p>
          <a href="javascript:;">已选择,联合申办</a>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
// 引入jquery并使用
import $ from "jquery";
import "@/assets/css/projectApproval.css";
export default {
  data: function() {
    return {
      idq:0,
      // 选择的项数
      // totalAll:1 ,
      // 返回的表格数据
      queryList: {
        page: 1,
        pageSize: 20,
        value: "",
        cityNum: "",
        aptNum: "",
        serNum: ""
      },
      // 选中的办事项数
      amount: 0,
      // 表格
      radioList: [],
      currentPage4: 4,
      isShow: -1,
      ckeckVal: false,
      ids: 0,
      idc: 0,
      ida: 0,
      idd: 0,
      typeList: ["社会投资项目", "政府投资项目"],
      citys: [],
      areas: ["全部", "景德镇市", "萍乡市", "九江市", "新余市", "鹰潭市"],
      departments: [],
      projectList: [
        "带方案出让用地的产业区快范围内工业项目",
        "带方案出让用地的产业区快范围内工业项目",
        "中小型建设项目",
        "一般项目"
      ],
    };
  },
  created() {
    this.countrys(), this.departs(), this.departsOff();
  },
  methods: {
    // 获取市级城市接口
    async countrys() {
      const { data: res } = await this.$http.get("/api/citys");
      // console.log(res)
      this.citys = res.data;
    },
    // 获取省厅级的接口
    async departs() {
      const { data: res } = await this.$http.get("/api/departs");
      // console.log(res)
      this.departments = res.data;
    },
    // 获取列表数
    async departsOff() {
      const { data: res } = await this.$http.get("/api/officeHall");
      // console.log(res)
      this.radioList = res.data;
      console.log(this.radioList);
    },
    // 点击列表，事项增加
    showClic(index, e) {
      if (e.target.checked) {
        this.isShow = index;
        this.amount++;
      } else {
        this.isShow = -1;
        this.amount--;
      }
    },
    // 切换tab
    activeTab(num) {
      this.ids = num;
    },
    // 一级城市
    areasTab(numa) {
      this.ida = numa;
    },
    // 城市切换
    citysTab(numc) {
      this.idc = numc;
    },
    // 部门切换
    departTab(numd) {
      this.idd = numd;
    },
    projeckList(idn){
      this.idq=idn
    },
    // 返回首页
    backHome() {
      this.$router.push("/projectApproval");
    },
    // 点击显示表格的隐藏
    // openIt() {
    //   this.open = !open;
    // },
    // 添加滚动事件 显示固定栏
    scrollFixed() {
      var matter = $(".fixed-matter");
      var matTop = matter.offset().top;
      var ele = $(".table").offset().top;
      // console.log(ele);
      if (matTop < ele) {
        //一屏不展示table时固定列不显示
        matter.css("opacity", "0");
      }
      $(window).scroll(function() {
        var matTop = matter.offset().top;
        if (matTop > ele) {
          //滚动到table位置展示固定列
          matter.css("opacity", "1");
          var Top = $(this).scrollTop();
          if (Top > ele) {
            //table展示时固定在屏幕底部
            matter.addClass("active");
          } else {
            //展示完全后排列在分页后
            matter.removeClass("active");
          }
        } else {
          matter.css("opacity", "0");
        }
      });
    },
    // 分页方法
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  },
  mounted() {
    // 滚动事件 显示固定栏
    this.scrollFixed();
  }
};
</script>
<style lang="less" scode>
.spans {
  display: block !important;
}
</style>
